<!-- 评论管理 - 弹框 -->
<template>
    <el-dialog 
    :title="typeTitle+'留言'"
    v-model="dialogVisible"
    width="45%"
    :close-on-click-modal="false" 
    :close-on-press-escape="true"
    @closed="resetForm(formRef)">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="130px">
            <el-form-item label="文章标题" prop="articleId">
                <el-input v-model.trim="form.articleTitle" :readonly="billState" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="评论用户id" prop="fromUserId">
                <el-input v-model.trim="form.fromUserId" :readonly="billState" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="评论用户昵称" prop="fromNickname">
                <el-input v-model.trim="form.fromNickname" :readonly="billState" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="回复评论用户Id" prop="toUserId">
                <el-input v-model.trim="form.toUserId" :readonly="billState" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="回复评论用户昵称" prop="toNickname">
                <el-input v-model.trim="form.toNickname" :readonly="billState" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="评论内容" prop="content">
                <el-input type="textarea" v-model.trim="form.content" :readonly="billState" placeholder=""></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button type="primary" class="" v-if="dialogState == 'add'" :loading="submitLoading" @click="submitClick">确定</el-button>
                <el-button type="primary" class="" v-if="dialogState == 'update'" :loading="updateLoading" @click="updateClick">确定</el-button>
                <el-button class="" @click="resetForm(formRef)">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, nextTick, reactive, ref } from "vue";
import { messageApi } from '@/api/article/message/message-api';
import { ElMessage } from 'element-plus';

// ========================= 弹框控制 =========================
let dialogVisible = ref(false);
let dialogState = ref('add');
function onShowDialog(type, row) {
    if(row) {
        nextTick(() => {
            for(let key in form) {
                form[key] = row[key];
            };
            form.id = row.id;
        })
    };
    dialogState.value = type;
    dialogVisible.value = true;
};

// 组件向外暴露属性或方法
defineExpose({
    onShowDialog
});

// ========================= 计算属性 =========================
const typeTitle = computed(() => {
    if(dialogState.value == 'add') return '新增';
    if(dialogState.value == 'update') return '修改';
    if(dialogState.value == 'view') return '查看';
});

const billState = computed(() => {
    if(dialogState.value != 'view') return false;
    return true;
});

// ========================= 定义发射给父组件的方法 =========================
const emits = defineEmits(['updateCommentsList']);

// ========================= 表单 =========================
const form = reactive({
    id:'',                  // 主键
    articleId:'',           // 文章id
    articleTitle:'',        // 文章标题
    parentId:'',            // 父级评论id
    fromUserId:'',          // 评论用户id
    fromNickname:'',        // 评论用户昵称
    fromAvatar:'',          // 评论用户头像
    toUserId:'',            // 回复评论用户Id
    toNickname:'',          // 回复评论昵称
    toAvatar:'',            // 回复评论头像
    content:'',             // 评论内容
    createdAt:'',           // 创建时间
    updatedAt:'',           // 更新时间
});

const rules = reactive({
    content: [
        { required: true, message: '请输入留言内容', trigger: 'blur' }
    ],
});

// 表单操作
const formRef = ref();
let submitLoading = ref(false);
// 提交
function submitClick() {};

// 更新
let updateLoading = ref(false);
function updateClick() {};

// ========================= 重置表单 =========================
function resetForm(refFormName) {
    refFormName.resetFields(); // 重置表单
    for(let key in form) {
        form[key] = ''
    };
    dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>

</style>